<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>{$site.name}</title>
        <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />
        <!-- Bootstrap Core CSS -->
        <link href="__CDN__/assets/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="__CDN__/assets/css/index.css" rel="stylesheet">
        <style type="text/css">
            #mainbody {
                position: relative;
                width: 100%;
                min-height: auto;
                overflow-y: auto;
                background: #f1f6fd;
                color: #474157;
                height: calc(100vh - 61px);
            }
        </style>
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/3.7.3/html5shiv.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body id="page-top">
        <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand page-scroll" href="#page-top"><strong>开关</strong></a>
                </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </nav>

        <main id="mainbody">
            <div class="container">
                <div class="row" style="margin-top:51px;">
                    <div class="col-lg-12 col-md-12 col-xs-12">
                    <div class="form-inline pull-left">
                        <div class="form-group">
                            <div class="input-group">
                            <div class="input-group-addon">{:__('Devices')}</div>
                            <select class="form-control" name="deviceSelect" style="width:140px;" id="deviceSelect">
                                {foreach name="devList" item="vo"}
                                <option value="{$vo}" {in name="vo" value="" }selected{/in} >{$vo}</option>
                                {/foreach}
                            </select>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-lg-12">
                        <div class="index-gallery" style="padding-top:90px;">
                            <img id="img_pre" src="__CDN__/assets/img/sw0.png"/>
                            <input id="switcher" type="hidden" value="0"/>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="container">
                <p>Copyright @ 2017~{:date('Y',time())} 版权所有</p>
            </div>
        </footer>
    </body>

    <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="__CDN__/assets/js/echarts.min.js"></script>
    <script src="__CDN__/assets/js/echarts-theme.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            update_switcher_icon();
        });

        $("#deviceSelect").change(function(data){
            update_switcher_icon();
        });

        $("#img_pre").on("click",function(){
            var devicename = $("#deviceSelect").val();
            var on = $("#switcher").val();
            if(on == "1")
            {
                on = 0;
            }
            else
            {
                on = 1;
            }

            $.ajax({
                        method: 'get',
                        url:"/api/switcher/switch_control?devicename="+devicename+"&on="+on,
                        success: function (data) {
                            console.info(data.data.result.on);
                            $("#img_pre").attr("src", "__CDN__/assets/img/sw"+data.data.result.on+".png");
                            $("#switcher").val(data.data.result.on);
                        }
            });
        });

        function update_switcher_icon()
        {
            var devicename = $("#deviceSelect").val();
            console.info("select "+devicename);
            $.ajax({
                    method: 'get',
                    url:"/api/switcher/getSwitchState?&devicename="+devicename,
                    success: function (data) {
                        console.info(data);
                        $("#img_pre").attr("src", "__CDN__/assets/img/sw"+data.data.result.on+".png");
                        $("#switcher").val(data.data.result.on);
                    }
            });
        }

    </script>
</html>
